// 我的写法
// import { defineComponent, h } from "@vue/runtime-core";
// export default defineComponent({
// 	render() {
// 		return h("sprite", { x: 100, y: 100 })
// 	}
// })
// 老师的写法
import { h, defineComponent, ref, watch, reactive, toRefs } from "@vue/runtime-core";
import planeImg from "../../assets/飞机.png";
import { bulletWidth, planeWidth } from "../utils/gameConfig";
export default defineComponent({
	props: ["x", "y"],
	setup(props, { emit }) {
		// 此处响应式对象丢失了，props 变为普通对象
		// console.log(props);

		// 方案二 使用 toRefs() 将 props 对象转为响应式对象
		const { x, y } = toRefs(props);
		// 键盘控制,构建子弹
		window.addEventListener("keydown", (e) => {
			switch (e.code) {
				case "Space":
					// 发消息给父组件去生成子弹
					emit("attack", { x: x.value - planeWidth / 2 + bulletWidth / 2, y: y.value });
					break;
				default:
					break;
			}
		});
		// 方案二
		return {
			x,
			y
		}


		// 方案一 多创建一个可写的响应式对象
		const point = reactive({ x: props.x, y: props.y });
		// return {
		// 	point
		// }
		watch(props, (value) => {
			// console.log(value);
			// 报错 因为 props 是只读的响应式对象
			// props.x = value.x;
			// 方案一
			// point.x = value.x;
			// point.y = value.y;
		});
		return {
			x: props.x,
			y: props.y
		}
	},
	render(ctx) {
		return h("Container", { x: ctx.x, y: ctx.y }, [h("Sprite", { texture: planeImg }, "我的")])
		// 方案一
		// return h("Container", { x: ctx.point.x, y: ctx.point.y }, [h("Sprite", { texture: planeImg })])
	}
})